<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格管理</title>
    <link rel="stylesheet" href="/static/css/layui.css">
</head>

<body>

<!-- 主体部分 -->
<div class="layui-card">
    <div class="layui-card-body">

        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" id="hid" name="hid" placeholder="作业编号" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="btn_search" class="layui-btn layui-icon  layui-icon-search" data-type="search">查询
                    </button>
                </div>
                <div class="layui-inline">
                    <button id="btn_refresh" class="layui-btn layui-icon  layui-icon-refresh" data-type="search">重置
                    </button>
                </div>
                <div class="layui-inline">
                    <button id="export-button" class="layui-btn layui-icon  layui-icon-refresh" data-type="search">
                        导出到Excel
                    </button>
                </div>
	    </div>

        </div>

        <table id="manage_table" lay-filter="manage_table"></table>
    </div>
</div>
<!--其他操作-->
<script type="text/html" id="other_operation">

    </script>

<script src="/static/jquery-3.6.0.min.js"></script>
<script src="/static/jquery.table2excel.js"></script>
<!-- javascript 脚本 -->
<script src="/static/layui.js"></script>
<script>
    layui.use(['layer', 'form', 'table'], function () {
        var table = layui.table;

        var
            $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            layer = layui.layer;

        var currentRow = {},
            currentOpt = "",
            listUrl = "/copy/list1",
            layerIndex = 0;

        $(function () {
            // 查询按钮
            $("#btn_search").on("click", function () {
                table.reload('manage_table', {
                    where: {
                        hid: $("#hid").val()
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });
            $("#btn_refresh").on("click", function () {
                initTable();
            });
            initTable();
        });

        function initTable() {
            // 初始化列表(表格)
            table.render({
                elem: '#manage_table'
                , url: listUrl //数据接口
                , method: "GET"
                , request: {
                    pageName: 'pageIndex',  // 页码的参数名称，默认：page
                    limitName: 'pageSize'   // 每页数据量的参数名，默认：limit
                }
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],     // 自定义分页布局
                    curr: 1,      // 设置默认起始页1
                    groups: 10,   //只显示10个连续页码,就是说显示10个可见页其他的省略
                    first: false, // 不显示首页
                    last: false   // 不显示尾页
                }
                ,limit: 10
                ,limits: [10,20,30,40,50,1000000]
                , toolbar: '#tableToolBar'
                , defaultToolbar: []
                , cellMinWidth: 100
                , cols: [
                    [ //表头
                        {field: 'hid', title: '作业编号', align: 'center'}
                        , {field: 'sid', title: '学生编号', align: 'center' }
                        , {field: 'semblance', title: '相似度', align: 'center'}
                    ]
                ],
                parseData: function (res) { //res 即为原始返回的数据
                    console.log(res)
                    return {
                        "code": res.code == 200 ? 0 : res.code, //解析接口状态
                        "msg": res.code == 200 ? "" : res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
            });
        };
	    // 给按钮绑定点击事件
        $("#export-button").click(function () {
            // 获取表格数据
            var data = table.cache['manage_table'];
            // 创建一个 HTML 表格字符串
            var tableHtml = '<table>';
            tableHtml += '<thead>';
            tableHtml += '<tr>';
            // 添加表头
            tableHtml += '<th>学号1 学号2</th>';
            tableHtml += '<th>作业编号</th>';
            tableHtml += '<th>重复度</th>';
            // 添加更多表头列...
            tableHtml += '</tr>';
            tableHtml += '</thead>';
            tableHtml += '<tbody>';
            // 添加数据行
            for (var i = 0; i < data.length; i++) {
                console.log(data[i])
                tableHtml += '<tr>';
                tableHtml += '<td>' + data[i].sid + '</td>';
                tableHtml += '<td>' + data[i].hid + '</td>';
                tableHtml += '<td>' + data[i].semblance + '</td>';
                // 添加更多数据列...
                tableHtml += '</tr>';
            }
            tableHtml += '</tbody>';
            tableHtml += '</table>';

            // 将 HTML 表格添加到页面中
            var downloadLink = document.createElement('a');
            var blob = new Blob(["\uFEFF" + tableHtml], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'excel_export.xlsx';
            downloadLink.click();
        });
    });
</script>

</body>

</html>
